<script>
import { reactive } from "@vue/reactivity";
import { useStore } from "../store/index";
import { Toast } from "vant";
import router from "@/router";
import { nextTick } from "@vue/runtime-core";
import { public_status } from "../store/public_status";
export default {
  setup() {
    // # 获取用户数据
    const userData = useStore().userData;

    // # 数据中心
    let data = reactive({
      account: null,
      psw: null,

      isUp: false, // # 控制面板升降
    });

    // # 隐藏底部导航
    public_status().display = false;

    // # 账号正则
    let acc_reg = (e) => {
      let account = Number(e.target.value);
      let reg =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;

      if (reg.test(account)) {
        data.account = account;
      } else {
        data.account = null;
        // * 轻提示
        Toast("请输入正确的手机号");
      }
    };

    // # 密码正则
    let psw_reg = (e) => {
      let reg = /^[0-9a-zA-Z]\w{7,15}$/;

      let psw = Number(e.target.value);
      if (reg.test(psw)) {
        data.psw = psw;
      } else {
        data.psw = null;
        // * 轻提示
        Toast("请输入正确的账号格式");
      }
    };

    // # 注册按钮
    let register = () => {
      if (data.account && data.psw) {
        // # 检查账号是否已经注册
        if (data.account in userData) {
          // * 轻提示
          Toast("该账号已经注册");
        } else {
          // # 新用户优惠券
          let coupon = [
            {
              value: 50,
              limit: 150,
              title: "新人满减券",
              type: "reduce",
              term: "2022-12-30",
            },
            {
              value: 100,
              limit: 600,
              title: "新人满减券",
              type: "reduce",
              term: "2022-12-30",
            },
            {
              value: 5.5,
              limit: 1000,
              title: "新人5.5折券",
              type: "discount",
              term: "2022-12-30",
            },
            {
              value: 6.6,
              limit: 800,
              title: "新人6.6折券",
              type: "discount",
              term: "2022-12-30",
            },
          ];

          // # 将新用户数据放入数据库中
          userData[data.account] = {
            psw: data.psw, // % 密码
            Favorites: [], // % 收藏
            Shopping_Cart: [], // % 购物车
            balance: 0, // % 余额
            address: [], // % 地址
            order: [], // % 订单
            coupon, // % 优惠券
            historylist: [111,],
          };

          // * 轻提示
          Toast.loading({
            message: "加载中...",
            forbidClick: true,

            onClose: () => {
              // # 路由跳转
              router.push({
                path: "/Login",
                query: {
                  account: data.account,
                  psw: data.psw,
                },
              });
              setTimeout(() => {
                Toast({
                  message: "注册成功",
                  position: "bottom",
                });
              }, 500);
            },
          });

          console.log(userData);
        }
      } else {
        // * 轻提示
        Toast("请检查账号密码");
      }
    };

    nextTick(() => {
      setTimeout(() => {
        data.isUp = true;
      }, 100);
    });

    return {
      data,
      acc_reg,
      psw_reg,
      register,
      router,
    };
  },
};
</script>

<template>
  <div class="register">
    <!-- 头部背景 -->
    <div class="login_top">
      <div class="title">REGISTER</div>
      <div class="lit_title">wish you have a good time every day</div>
    </div>
    <!-- 头部背景 -->

    <!-- 登录主体 -->
    <div :class="['login_body', { up: data.isUp }]">
      <div class="title">Welcome</div>
      <!-- 手机输入框 -->
      <div class="phonebox">
        <div class="text">+86 <span>|</span></div>
        <input
          class="phone"
          type="phone"
          placeholder="请输入11位手机号码"
          @keydown.enter="acc_reg"
          @blur="acc_reg"
        />
      </div>

      <!-- 输入密码 -->
      <input
        class="password"
        type="password"
        @keydown.enter="psw_reg"
        @blur="psw_reg"
        placeholder="请输入登录密码"
      />
      <!-- 登录按钮 -->
      <div class="login" @click="register">注册</div>

      <!-- 注册按钮 -->
      <div class="back" @click="router.back()">取消</div>
    </div>
    <!-- 登录主体 -->
  </div>
</template>

<style lang="scss" scoped>
.register {
  overflow: hidden;

  // 头部背景
  .login_top {
    position: absolute;
    top: 0;
    height: 50%;
    width: 100%;
    background: linear-gradient(320deg, #56e7b9 30%, #f0f0f0);

    .title {
      font-size: 24px;
      color: #000;
      font-weight: 800;
      padding-top: 125px;
      margin-left: 25px;
    }

    .lit_title {
      margin-left: 25px;
      font-size: 10px;
      color: rgb(0, 0, 0, 0.3);
    }
  }

  // 登录主体
  .login_body {
    position: fixed;
    padding-bottom: 30px;
    bottom: -130px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    width: 100%;
    height: 65%;
    background-color: #fff;

    transition: bottom 1s;

    &.up {
      bottom: 0;
    }

    .title {
      font-size: 20px;
      font-weight: 600;
      color: #060606;
      margin-top: 50px;
      margin-left: 25px;
    }

    // 手机输入框
    .phonebox {
      margin: 0 25px;
      display: flex;
      margin-top: 30px;
      height: 60px;
      line-height: 60px;
      background-color: #f9f9f9;
      border-radius: 20px;

      .phone {
        flex: 1;
        margin-right: 20px;
        font-size: 14px;
        border: transparent;
        background-color: #f9f9f9;
      }

      .text {
        padding-left: 20px;
        width: 50px;
        font-size: 13px;
        color: #cdcdcd;
      }
    }

    // 密码输入框
    .password {
      margin: 0 25px;
      width: 86%;
      margin-top: 30px;
      height: 60px;
      line-height: 60px;
      background-color: #f7f7f7;
      border-radius: 20px;
      border: transparent;
      text-indent: 16px;
    }

    //  登录按钮
    .login {
      font-weight: 600;
      margin: 0 25px;
      text-align: center;
      font-size: 16px;
      color: #37363b;
      height: 56px;
      line-height: 56px;
      border: 3px solid #3d3d3d;
      border-radius: 12px;
      margin-top: 30px;
    }

    > .back {
      font-weight: 600;
      margin: 0 25px;
      text-align: center;
      font-size: 16px;
      color: #fff;
      height: 56px;
      line-height: 56px;
      border: 3px solid #1d1e22;
      border-radius: 12px;
      margin-top: 30px;
      background-color: #1d1e22;
    }
  }

  // 修改输入框样式
  .phone::-webkit-input-placeholder,
  .password::-webkit-input-placeholder {
    color: #cdcdcd;
    font-size: 14px;
  }
}
</style>